/**
* 招聘 模块 - 组件
*/
<template>
  <div class="h-recruit">
    <div class="h-banner">
      <img src="@/assets/img/recruit.jpg" />
    </div>
    <el-table :data="tableData" class="mtb20">
      <el-table-column prop="position" label="招聘岗位"></el-table-column>
      
      <el-table-column prop="number" label="招聘人数"> </el-table-column>
      
      <el-table-column prop="area" label="招聘区域"> </el-table-column>
      
      <el-table-column label="岗位职责及岗位要求">
        <template slot-scope="scope">
          <p class="h-job" @click="handleRouterClick(scope.row)">职位描述</p>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
// import { recruitList } from '@/mock' // 招聘数据
import { recruitData } from '@/api'

export default {
  name: 'Recruit',
  props: {},
  data () {
    return {
      tableData: [],
    }
  },
  created () {
     this.getRecruitData() // 招聘数据加载
  },
  mounted () {
   // this.getRecruitData() // 招聘数据加载
   // this.tableData = recruitList.result // 使用接口时 此处删除
  },
  methods: {
    getRecruitData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        id: '111'
      }
      recruitData(params).then(res => {
        this.tableData = res
      })
    },
    /**
    *@Description
    *@Param
    *@Return 点击跳转路由.
    **/
    handleRouterClick(item){
      this.$router.push({ name: 'jobDesc', params: { id: item.id } })
    },
  }
}
</script>

<style lang="scss" scoped>
  .h-recruit {
  }
  .h-banner{
    img{
      width: 100%;
      height: 400px;
    }
  }
  .h-job{
    cursor: pointer;
    &:hover{
      text-decoration: underline;
    }
  }
</style>
